<template>
  <div class="notify">
    <div class="notify-left">
      <ul class="nav">
        <li :class="type=='system'?'active':''" @click="toNotifyPage('system')">系统通知 <i v-if="this.$store.state.countUnRead.systemMsgCount>0">

        </i></li>
        <li :class="type=='task'?'active':''" @click="toNotifyPage('task')">任务提醒 <i v-if="this.$store.state.countUnRead.taskMsgCount>0">

        </i></li>
        <li :class="type=='end'?'active':''" @click="toNotifyPage('end')">完结通知 <i v-if="this.$store.state.countUnRead.completeMsgPageCount>0">

        </i></li>
        <li :class="type=='work'?'active':''" @click="toNotifyPage('work')">工作简报 <i v-if="this.$store.state.countUnRead.workBriefingCount>0">

        </i></li>
      </ul>
    </div>
    <div class="notify-right">
      <router-view/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Notify",
    data(){
      return{
        type:'system',
      }
    },
    created(){

    },
    methods:{
      toNotifyPage(type){
        this.type=type;
        if(type=='system'){
          this.$router.push({path: '/notify/systemNotify'});
        }else if(type=='task'){
          this.$router.push({path: '/notify/taskNotify'});
        }else if(type=='end'){
          this.$router.push({path: '/notify/endNotify'});
        }else if(type=='work'){
          this.$router.push({path: '/notify/workNotify'});
        }
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .notify {
    display: flex;
    padding: 24px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    .notify-left {
      width: 256px;
      height: 100%;
      border-radius: 6px;
      background-color: #ffffff;
      margin-right: 24px;
      .nav{
        padding-left: 32px;
        >li{
          padding-top: 32px;
          font-size: 16px;
          color: #96A2AA;
          cursor: pointer;
          position: relative;
          i{
            position: absolute;
            width: 5px;
            height: 5px;
            left: 70px;
            top: 30px;
            background-color: #FC5A44;
            border-radius: 50%;
          }
        }
        >li.active{
          color: #454A55;
          font-weight: bold;
        }
      }
    }

    .notify-right {
      width: calc(100% - 256px - 24px);
      height: 100%;
      background-color: #ffffff;
      border-radius: 6px;
    }
  }
</style>
